<template>
  <div id="wangeditor"></div>
</template>

<script>
  import E from 'wangeditor'

  export default {
    name: "index",
    props: {
      //初始值
      val:{
        type:String,
        default:'',
      }
    },
    data() {
      return {
        //富文本的html内容
        html: "",
        //富文本的text内容
        text: "",
        //富文本实例对象
        editor: null,
      }
    },
    mounted() {
      this.init();
    },

    methods: {
      //初始化富文本
      init() {
        this.editor = new E('#wangeditor')
        //配置菜单
        this.editor.config.menus = [
          'head',
          'bold',
          'fontSize',
          'fontName',
          'italic',
          'underline',
          'strikeThrough',
          'indent',
          'lineHeight',
          'foreColor',
          'backColor',
          'link',
          'list',
          'todo',
          'justify',
          'quote',
          'emoticon',
          'image',
          'table',
          'splitLine',
          'undo',
          'redo',
        ]
        //配置编辑区域的 z-index
        this.editor.config.zIndex = 100;
        //自定义上传实现
        this.editor.config.customUploadImg = (resultFiles, insertImgFn) => {
          //上传
          let formData = new FormData();
          formData.append("file", resultFiles[0]);

          this.$HttpService.req({
            url: "/common/uploadFile",
            method: "post",
            data: formData,
          }).then(res => {
            insertImgFn(this.$util.getFileUrl(res));
          })
        }

        //带上token
        this.editor.config.uploadImgParams = {
          token: this.$util.getToken(),
        }
        //设置内容变化的回调函数
        this.editor.config.onchange = (newHtml) => {
          this.html = this.editor.txt.html();
          this.text = this.editor.txt.text();
          this.$emit('change', {
            html: this.html,
            text: this.text
          });
        };
        this.editor.create()
        this.editor.txt.html(this.val);
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/  .placeholder{
    display: none;
  }
</style>
